﻿<template>
	<div class="projectResult-container">
		<el-dialog v-model="isShowDialog" :width="1600" draggable="" @close="cancel" style="font-size: 50px;">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<div class="mycard">
				<el-card  >
					<p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:100px;height:40px;color:white;text-align: center">
						Project
					</p>
					<el-row class="mycard">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="" style="height: 15px;">
							<el-form-item label="ProjectNo" prop="projectNo" class="quanjuclasslabel"  >
								<label >{{ ruleFormproject.projectNo }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="height: 15px;">
							<el-form-item label="ProjectName" prop="projectName">
								<label>{{ ruleFormproject.projectName }}</label>
							</el-form-item>

						</el-col>
						<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.gCode')" prop="gCode">
								<label>{{ ruleForm.gCode }}</label>
							</el-form-item>
						</el-col> -->
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="height: 15px;">
							<el-form-item :label="$t('message.projectResult.efficiency')" prop="efficiency">
								<label>{{ ruleForm.efficiency }}</label>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>

				<el-card>
					<p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:100px;height:40px;color:white;text-align: center">
						Device
					</p>
					<el-row>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.robotModel')" prop="robotModel">

								<label>{{ ruleForm.robotModel }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.robotQty')" prop="robotQty">


								<label>{{ ruleForm.robotQty }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.blanketMode')" prop="blanketMode">

								<label>{{ ruleForm.blanketMode }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.binType')" prop="binType">


								<label>{{ ruleForm.binType }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.binSize')" prop="binSize">


								<label>{{ ruleForm.binSize }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.chargeQty')" prop="chargeQty">


								<label>{{ ruleForm.chargeQty }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.binQty')" prop="binQty">


								<label>{{ ruleForm.binQty }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.packQty')" prop="packQty">


								<label>{{ ruleForm.packQty }}</label>
							</el-form-item>

						</el-col>
					</el-row>
				</el-card>
				<el-card>
					<p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:100px;height:40px;color:white;text-align: center">
						Other
					</p>
					<el-row>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.robotCode')" prop="robotCode">


								<label>{{ ruleForm.robotCode }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.blanketCode')" prop="blanketCode">


								<label>{{ ruleForm.blanketCode }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.binTypeCode')" prop="binTypeCode">


								<label>{{ ruleForm.binTypeCode }}</label>
							</el-form-item>

						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('message.projectResult.chargeCode')" prop="chargeCode">


								<label>{{ ruleForm.chargeCode }}</label>
							</el-form-item>

						</el-col>
					</el-row>
				</el-card>
				<el-card style="width: 100%;height: 100%">
					<p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:100px;height:40px;color:white;text-align: center">
						Map
					</p>
          <div ref="warehouseContainer" class="warehouse-container">
            <WarehouseViewer ref="WarehouseRef" :shelves="ruleForm.shelves"
                       :warehouseSize="ruleForm.warehouseSize" />
          </div>
<!--					<el-row>-->
<!--						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="24" class="mb20" style="width: 860px; height: 580px;z-index:1">-->
<!--							<el-form-item  prop="cADPathNew">-->

<!--								<div v-if="true" class="preview-modal"  >-->
<!--									<div class="preview-content" @click.stop style="width: 860px; height: 580px;z-index:1">-->
<!--										<img :src="ruleForm.cadPathNew" alt="Preview" @click="openPreview"-->
<!--											style="width: 1460px; height: 580px;z-index:1">-->
<!--									</div>-->
<!--								</div>-->

								<!-- <img :src="ruleForm.cadPathNew" v-if="!isPreviewOpen" @click="openPreview"
									alt="Preview Image" style="width:100px;height:100px" /> -->

<!--							</el-form-item>-->

<!--						</el-col>-->
						<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="cad-img" prop="vMPathNew">


								<div v-if="true" class="preview-modal"  >
									<div class="preview-content" @click.stop>
										<img :src="ruleForm.gridPathNew" alt="Preview" @click="openPreview2"
										style="width: 1024px; height: 768px;z-index:1">
									</div>
								</div>

								<img :src="ruleForm.gridPathNew" v-if="!isPreviewOpen2" @click="openPreview2"
									alt="Preview Image" style="width:100px;height:100px" />

							</el-form-item>


						</el-col> -->
<!--					</el-row>-->
				</el-card>
				<el-card>
					<!-- <p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:80px;height:30px;color:white;text-align: center">
						VM Show
					</p> -->
					<!-- <p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:100px;height:30px;color:white;text-align: center">
						Solution
					</p> -->
					 	<p
						style="font-weight: 1200;font-size: 24px; line-height: 30px; padding: 5px; background-color:#04AD91;width:100px;height:40px;color:white;text-align: center">
							Solution
					</p>
					<el-card>


<a href="http://180.169.76.202:17888/upload/CADFiles/Solution-20250215-UNIUNI.pdf" target="_blank">
<img src="http://180.169.76.202:17888/upload/CADFiles/10e44fd99c4aac7277fff7dc75ffd96.png" style="width:40px;height:50px" alt="Solution-20250215-UNIUNI.pdf">
</a>

						<!-- <p style="font-weight: 1200;font-size: 18px;">Video Area</p> -->
						<!-- 视频预览模态框 -->
						<!-- <div v-if="isVideoPreviewOpen" class="video-preview-modal">
							<div class="video-preview-content">
								<video controls width="640" height="360">
									<source :src="currentVideo" type="video/mp4">
									no support
								</video>
							</div>
						</div> -->


						<!-- <div v-for="(video, index) in videos" :key="index">
							<button @click="openVideoPreview(video)">查看视频</button>
						</div> -->

					</el-card>


				</el-card>
			</div>
			<!-- <el-card>
				<el-button type="primary" @click="openvm">Show AGV</el-button>


			</el-card> -->
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">{{ $t('message.pageConfiguration.cancel') }}</el-button>
					<el-button type="primary" @click="submit">{{ $t('message.pageConfiguration.confirm') }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>

	<vmlogin ref="vmloginRef" />
</template>
<style scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}

/* 统一设置 p 标签的高度 */
.uniform-title {
    height: 40px;
}

:deep(.el-form-item__label) {
    font-size: 18px; /* 可根据需要调整字体大小 */
}

:deep(.el-form-item__content label) {
    font-size: 18px; /* 可根据需要调整字体大小 */
}
</style>
<script lang="ts" setup="PDetail">
import {ref, onMounted, nextTick} from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { addProjectResult, updateProjectResult, getProResultDetail } from "/@/api/main/projectResult";

import router from "/@/router";
import vmlogin from '/@/views/main/projectResult/component/vmlogin.vue'
import { useI18n } from 'vue-i18n';
import WarehouseViewer from "/@/views/main/projectResult/component/WarehouseViewer.vue";
import { shelvesConfig } from '/src/config/shelves.config.js'; // 添加 .js 后缀
const vmloginRef = ref();

// 定义视频列表
const videos = ref<string[]>([
	'http://localhost:8022/upload/CADFiles/3d375323b8005ef173c588155636cf22.mp4'
]);

const WarehouseRef = ref();
// const imageSrc = ref('https://via.placeholder.com/300');
// 控制模态框是否显示的响应式变量，初始为 false 即隐藏
const isPreviewOpen = ref(false);
const isPreviewOpen2 = ref(false);

const { t, locale } = useI18n();
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: "",
	},
});
const openvm = () => {
	console.log('openvm')
	vmloginRef.value?.openDialog();
}
//父级传递来的函数，用于回调
const emit = defineEmits(["updateData"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
const ruleFormproject = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	projectNo: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.projectNo'), trigger: 'blur', },],
	gCode: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.gCode'), trigger: 'blur', },],
	deviceList: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.deviceList'), trigger: 'blur', },],
	vMPathNew: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.vMPathNew'), trigger: 'blur', },],
	cADPathNew: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.cADPathNew'), trigger: 'blur', },],
	efficiency: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.efficiency'), trigger: 'blur', },],
	robotModel: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.robotModel'), trigger: 'blur', },],
	robotQty: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.robotQty'), trigger: 'blur', },],
	blanketMode: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.blanketMode'), trigger: 'blur', },],
	binType: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.binType'), trigger: 'blur', },],
	binSize: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.binSize'), trigger: 'blur', },],
	chargeQty: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.chargeQty'), trigger: 'blur', },],
	binQty: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.binQty'), trigger: 'blur', },],
	packQty: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.packQty'), trigger: 'blur', },],
	length: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.length'), trigger: 'blur', },],
	width: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.width'), trigger: 'blur', },],
	robotCode: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.robotCode'), trigger: 'blur', },],
	blanketCode: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.blanketCode'), trigger: 'blur', },],
	binTypeCode: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.binTypeCode'), trigger: 'blur', },],
	chargeCode: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.chargeCode'), trigger: 'blur', },],
	totalPrice: [{ required: true, message: t('message.pageConfiguration.noticeinput') + ' ' + t('message.projectResult.totalPrice'), trigger: 'blur', },],
});



// 打开弹窗
const openDialog = async (row: any) => {
	//ruleForm.value = JSON.parse();
	var res = await getProResultDetail(JSON.stringify(row));
  ruleFormproject.value=res.data.result.project;
	ruleForm.value = res.data.result.projectResult;
	currentVideo.value = res.data.result.projectResult.vmPathNew;
  ruleForm.value.shelves = shelvesConfig
  ruleForm.value.warehouseSize = res.data.result.warehouseSize || { length: 90, width: 90 };
  await nextTick();
  WarehouseRef.value?.initScene();
  WarehouseRef.value?.animate();

	console.log(res)
	isShowDialog.value = true;
	isPreviewOpen.value = false;
	isPreviewOpen2.value = false;
		isVideoPreviewOpen.value = true;
};

// 提交
const submit = async () => {
	closeDialog();



	console.log(ruleForm.value)

	// var res = await addProjectResult(ruleForm.value);
	// console.log(res)
	// if (res.data.code == 200) {

	// 	ElMessage.success("保存成功！");
	// }
	// else {
	// 	ElMessage.error("保存失败！");

	// }



	// router.push({ path: '/project/projectResult' })
	// ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
	// 	if (isValid) {
	// 		let values = ruleForm.value;
	// 		if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
	// 			await addProjectResult(values);
	// 		} else {
	// 			await updateProjectResult(values);
	// 		}
	// 		closeDialog();
	// 	} else {
	// 		ElMessage({
	// 			message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
	// 			type: "error",
	// 		});
	// 	}
	// });
};





// 控制模态框的显示与隐藏
const isVideoPreviewOpen = ref(true);
// 存储当前预览的视频链接
const currentVideo = ref('');

// 打开视频预览
const openVideoPreview = (video: string) => {
	currentVideo.value = video;
	isVideoPreviewOpen.value = true;
};

// 关闭视频预览
const closeVideoPreview = () => {
	isVideoPreviewOpen.value = false;
	// 停止视频播放
	const videoElement = document.querySelector('video');
	if (videoElement) {
		(videoElement as HTMLVideoElement).pause();
		(videoElement as HTMLVideoElement).currentTime = 0;
	}
};




// 打开模态框的方法
const openPreview = () => {
	console.log('isPreviewOpen.value',isPreviewOpen.value);
	isPreviewOpen.value=!isPreviewOpen.value;
	// if (isPreviewOpen.value == false) {
	// 	isPreviewOpen.value = true;
	// }
	// else {
	// 	isPreviewOpen.value = false;

	// }
};


// 打开模态框的方法
const openPreview2 = () => {
	isPreviewOpen2.value=!isPreviewOpen2.value;
};


// 关闭模态框的方法
const closePreview = () => {
	isPreviewOpen.value = false;
};

// 关闭弹窗
const closeDialog = () => {
	emit("updateData");
	isShowDialog.value = false;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
};




// 页面加载时
onMounted(async () => {

});


//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script  >
<style scoped>
:deep(.el-form-item__label) {
    font-size: 18px; /* 可根据需要调整字体大小 */
}
:deep(.el-form-item__content label) {
    font-size: 18px; /* 可根据需要调整字体大小 */
}
:deep(.el-col) {
    height: 15px;
}
:deep(p) {
    margin-bottom: 20px;
}
.warehouse-container {
  width: 100%;
  height: 600px; /* 确保高度足够 */
}
</style>
